<!-- 无状态的 functional 组件 -->
<template functional>
  <a-sub-menu v-if="props.menu.type === props.menuType.GROUP.type" :key="props.menu.id" class="low-app-menu-group">
    <div :class="`devMode-${props.devMode}`" slot="title">
      <a-icon :type="props.openKeys.includes(props.menu.id)?'folder-open':'folder'"/>
      <span>{{props.menu.menuName}}</span>
      <div v-if="props.devMode" class="low-app-menu-setting">
        <a-dropdown :trigger="['click']">
          <a-icon type="setting" @click.stop="e => e.preventDefault()"/>
          <a-menu slot="overlay" @click="e=>listeners.settingMenuClick(e,props.menu)">
            <a-menu-item key="group-rename">重命名</a-menu-item>
            <a-menu-divider/>
            <a-menu-item key="order-to-up">向上移</a-menu-item>
            <a-menu-item key="order-to-down">向下移</a-menu-item>
            <a-menu-divider/>
            <a-menu-item key="delete"><span style="color: red;">删除</span></a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
    <template v-for="childMenu of props.menu.children">
      <low-app-menu-item :menu="childMenu" :devMode="props.devMode" v-on="listeners"/>
    </template>
  </a-sub-menu>
  <low-app-menu-item v-else :menu="props.menu" :devMode="props.devMode" v-on="listeners"/>
</template>

<script>

export default {
  name: 'LowAppSubMenu',
  props: {
    menu: Object,
    menuType: Object,
    openKeys: Array,
    devMode: Boolean,
  },
}
</script>